<template>
  <view class="matchBanner">
    <view @click="onClick()" class="container">
      <view class="header">
        <slot name="header">
          <view class="headerContainer">
            <ly-avatar :src="gameLogo" size="32rpx"></ly-avatar>
            <text class="title">{{ matchTime | dateWeek }}</text>
          </view>
        </slot>
      </view>
      <view class="body">
        <view class="teamLogo"><ly-avatar :src="teamALogo"></ly-avatar></view>
        <view class="teamContent">
          <view class="teamName">
            <text class="teamNameText">{{ teamAName }}</text>
          </view>
          <view class="score">
            <slot name="score">
              <text class="scoreText">{{ teamAScore }}</text>
              <text class="scoreText">:</text>
              <text class="scoreText">{{ teamBScore }}</text>
            </slot>
          </view>
          <view class="teamName">
            <text class="teamNameText">{{ teamBName }}</text>
          </view>
        </view>
        <view class="teamLogo"><ly-avatar :src="teamBLogo"></ly-avatar></view>
      </view>
      <view class="footer">
        <slot name="footer"><text class="footerText">前往观战 >></text></slot>
      </view>
    </view>
  </view>
</template>

<script>
import LyAvatar from "@/lyui/ly-avatar/avatar";
const weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
export default {
  name: "matchBanner",
  components: {
    LyAvatar
  },
  props: {
    gameLogo:String,
    teamALogo: String,
    teamBLogo: String,
    teamBName: String,
    teamAName: String,
    teamBScore: {
      type: Number,
      default: 0
    },
    teamAScore: {
      type: Number,
      default: 0
    },
    matchTime: {
      type: Number,
      default: 0
    }
  },
  methods: {
    onClick() {
      this.$emit("event-click");
    }
  },
  filters: {
    dateWeek(timestamp) {
      const t = timestamp * 1000;
      const d = new Date(t);
      return (
        (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) + "月" + (d.getDate() < 10 ? "0" + d.getDate() : d.getDate()) + "日 " + weekDay[new Date(t).getDay()]
      );
    }
  }
};
</script>

<style lang="scss">
.matchBanner {
  height: 225upx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
}
.container {
  padding: 20upx;
  background-color: rgba(#ffffff, 0.8);
  border-radius: 10upx;
  border-width: 4upx;
  border-style: solid;
  border-color: #72d6db;
  width: 640rpx;
  z-index: 1;
}
.header {
  text-align: center;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  flex-direction: row;
  z-index: 8;
}
.headerContainer{
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  border-radius: 2500rpx;
  background-color: #fb7299;
  padding: 0 40rpx;
}
.title {
  overflow: hidden;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  z-index: 9;
}
.body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 15upx;
}
.teamNameText {
  color: #ffffff;
}
.teamContent {
  border-radius: 2500upx;
  color: #ffffff;
  height: 80upx;
  line-height: 80upx;
  background-color: #72d6db;
  /* #ifndef APP-NVUE */
  width: calc(100% - 200upx);
  display: flex;
  /* #endif */
  /* #ifdef APP-NVUE */
  width: 400rpx;
  /* #endif */
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.score {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
}
.scoreText {
  font-size: 50rpx;
  color: #ffffff;
  margin: 0 5upx;
  /* #ifndef APP-NVUE */
  text-shadow: 2upx 2upx 5upx #353535;
  /* #endif */
}

.footer {
  margin-top: 10upx;
  text-align: center;
}
.footerText {
  text-align: center;
  font-size: 26upx;
  color: #5b5a5b;
  font-weight: bold;
}
</style>
